<template>
  <div class="app-container">
    <div class="app-container_title">{{ useTitle() }}</div>
    <el-form
      :model="queryParams"
      ref="queryRef"
      v-show="showSearch"
      :inline="true"
      label-width="68px"
    >
      <el-form-item label="服务主机" prop="service_host">
        <el-input
          v-model="queryParams.service_host"
          placeholder="请输入服务主机"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务名称" prop="service_name">
        <el-input
          v-model="queryParams.service_name"
          placeholder="请输入服务名称"
          clearable
          style="width: 240px"
          @keyup.enter="handleQuery"
        />
      </el-form-item>
      <el-form-item label="服务状态" prop="service_status">
        <el-select
          v-model="queryParams.service_status"
          placeholder="服务状态"
          clearable
          style="width: 240px"
        >
          <el-option
            v-for="status in statusOptions"
            :key="status.value"
            :label="status.label"
            :value="status.value"
          />
        </el-select>
      </el-form-item>
      <el-form-item>
        <el-button @click="handleQuery">搜索</el-button>
        <el-button @click="resetQuery">重置</el-button>
      </el-form-item>
    </el-form>
    <el-row :gutter="10" class="mb8">
      <el-col :span="1.5">
        <el-button type="primary" icon="Plus" @click="handleAdd"
          >新建模型部署</el-button
        >
      </el-col>
      <el-col :span="1.5">
        <el-button
          type="danger"
          icon="Delete"
          :disabled="multiple"
          @click="handleBatchDelete"
          >批量删除</el-button
        >
      </el-col>
    </el-row>

    <!-- 表格数据 -->
    <div class="table-wrapper">
      <div class="table-wrapper_main">
        <el-table
          v-loading="loading"
          :data="serviceList"
          @selection-change="handleSelectionChange"
        >
          <el-table-column type="selection" width="55" align="center" />
          <el-table-column label="服务ID" prop="service_id" width="120" />
          <el-table-column
            label="服务名称"
            prop="service_name"
            :show-overflow-tooltip="true"
            width="150"
          />
          <el-table-column label="服务状态" prop="service_status">
            <template #default="scope">
              <el-tag
                type="primary"
                v-if="scope.row.service_status === '运行中'"
                >运行中</el-tag
              >
              <el-tag
                type="danger"
                v-else-if="scope.row.service_status === '已停止'"
                >已停止</el-tag
              >
              <el-tag
                type="warning"
                v-else-if="scope.row.service_status === '暂停中'"
                >暂停中</el-tag
              >
              <el-tag
                type="success"
                v-else-if="scope.row.service_status === '正常'"
                >正常</el-tag
              >
              <el-tag v-else>{{ scope.row.service_status }}</el-tag>
            </template>
          </el-table-column>
          <el-table-column
            label="部署模型"
            prop="model_name"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="部署版本"
            prop="model_version"
            :show-overflow-tooltip="true"
          />
          <el-table-column
            label="服务描述"
            prop="description"
            :show-overflow-tooltip="true"
            width="150"
          />
          <el-table-column label="创建时间" align="center" prop="create_time">
            <template #default="scope">
              <span>{{ scope.row.create_time }}</span>
            </template>
          </el-table-column>
          <el-table-column
            label="操作"
            align="center"
            class-name="small-padding fixed-width"
          >
            <template #default="scope">
              <el-tooltip content="编辑服务" placement="top">
                <el-button
                  link
                  type="primary"
                  icon="Edit"
                  @click.stop="handleUpdate(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="删除服务" placement="top">
                <el-button
                  link
                  type="danger"
                  icon="Delete"
                  @click.stop="handleDelete(scope.row)"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="启动服务" placement="top">
                <el-button
                  link
                  type="success"
                  icon="VideoPlay"
                  @click.stop="handleStart(scope.row)"
                  :disabled="scope.row.service_status === '运行中'"
                ></el-button>
              </el-tooltip>
              <el-tooltip content="停止服务" placement="top">
                <el-button
                  link
                  type="warning"
                  icon="VideoPause"
                  @click.stop="handleStop(scope.row)"
                  :disabled="scope.row.service_status === '已停止'"
                ></el-button>
              </el-tooltip>
            </template>
          </el-table-column>
          <template v-slot:empty>
            <div class="no-data">
              <span>暂无数据</span>
            </div>
          </template>
        </el-table>
      </div>
      <pagination
        v-show="total > 0"
        :total="total"
        :page.sync="queryParams.pageNum"
        :limit.sync="queryParams.pageSize"
        @pagination="getList"
      />
    </div>

    <el-dialog :title="title" v-model="open" width="800px" append-to-body>
      <el-form
        ref="serviceForm"
        :model="form"
        :rules="rules"
        label-width="120px"
      >
        <!-- 基本任务配置 -->
        <div class="form-section">
          <h3 class="section-title">基本任务配置</h3>

          <!-- 服务名称 -->
          <el-form-item label="服务名称" prop="service_name">
            <el-input
              v-model="form.service_name"
              placeholder="请输入服务名称"
            />
          </el-form-item>

          <!-- 服务编码 -->
          <el-form-item label="服务编码" prop="service_code">
            <el-input
              v-model="form.service_code"
              placeholder="请输入服务编码"
              :disabled="!!form.service_id"
            />
          </el-form-item>

          <!-- 报码模块 -->
          <el-form-item label="报码模块" prop="report_code">
            <el-input v-model="form.report_code" placeholder="请输入报码模块" />
          </el-form-item>

          <!-- 任务选择 -->
          <el-form-item label="任务选择" prop="task_id">
            <el-select
              v-model="form.task_id"
              placeholder="请选择任务"
              style="width: 100%"
              :disabled="!!form.service_id"
            >
              <el-option
                v-for="item in taskOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- 服务器选择 -->
          <el-form-item label="服务器选择" prop="service_host">
            <el-select
              v-model="form.service_host"
              placeholder="请选择服务器"
              style="width: 100%"
            >
              <el-option
                v-for="item in serverOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- 接口方法 -->
          <el-form-item label="接口方法" prop="service_api_method">
            <el-select
              v-model="form.service_api_method"
              placeholder="请选择接口方法"
              style="width: 100%"
            >
              <el-option label="GET" value="GET" />
              <el-option label="POST" value="POST" />
              <el-option label="PUT" value="PUT" />
              <el-option label="DELETE" value="DELETE" />
            </el-select>
          </el-form-item>

          <!-- 接口路径 -->
          <el-form-item label="接口路径" prop="service_api_path">
            <el-input
              v-model="form.service_api_path"
              placeholder="请输入接口路径"
            />
          </el-form-item>

          <!-- 服务描述 -->
          <el-form-item label="服务描述" prop="description">
            <el-input
              v-model="form.description"
              type="textarea"
              placeholder="请输入服务描述"
            />
          </el-form-item>
        </div>

        <!-- 数据配置 -->
        <div class="form-section">
          <h3 class="section-title">数据配置</h3>

          <!-- 环境选择 -->
          <el-form-item label="环境选择" prop="env_selection">
            <el-select
              v-model="form.env_selection"
              placeholder="请选择环境"
              style="width: 100%"
            >
              <el-option label="生产环境" value="production" />
              <el-option label="测试环境" value="testing" />
            </el-select>
          </el-form-item>

          <!-- API方法 -->
          <el-form-item label="API方法" prop="api_method">
            <el-select
              v-model="form.api_method"
              placeholder="请选择API方法"
              style="width: 100%"
            >
              <el-option
                v-for="item in apiMethodOptions"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>

          <!-- API Host -->
          <el-form-item label="API Host" prop="api_host">
            <el-input v-model="form.api_host" placeholder="请输入API Host" />
          </el-form-item>

          <!-- API路径 -->
          <el-form-item label="API路径" prop="api_data_path">
            <el-input
              v-model="form.api_data_path"
              placeholder="请输入API路径"
            />
          </el-form-item>

          <!-- 请求类 -->
          <el-form-item label="请求类" prop="data_request_class">
            <el-input
              v-model="form.data_request_class"
              placeholder="请输入请求类"
            />
          </el-form-item>

          <!-- 响应类 -->
          <el-form-item label="响应类" prop="data_response_class">
            <el-input
              v-model="form.data_response_class"
              placeholder="请输入响应类"
            />
          </el-form-item>
        </div>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitForm">确 定</el-button>
          <el-button @click="cancel">取 消</el-button>
        </div>
      </template>
    </el-dialog>

    <!-- 启动服务弹窗 -->
    <el-dialog
      title="启动服务"
      v-model="startDialogVisible"
      width="600px"
      append-to-body
    >
      <el-form
        ref="startFormRef"
        :model="startForm"
        :rules="startRules"
        label-width="120px"
      >
        <el-form-item label="服务名称" prop="service_name">
          <el-input
            v-model="startForm.service_name"
            placeholder="请输入服务名称"
          />
        </el-form-item>
        <el-form-item label="主机" prop="host">
          <el-input v-model="startForm.host" placeholder="请输入主机地址" />
        </el-form-item>
        <el-form-item label="端口" prop="port">
          <el-input-number
            v-model="startForm.port"
            :min="1"
            :max="65535"
            placeholder="请输入端口"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="目标端口" prop="target_port">
          <el-input-number
            v-model="startForm.target_port"
            :min="1"
            :max="65535"
            placeholder="请输入目标端口"
            style="width: 100%"
          />
        </el-form-item>
        <el-form-item label="镜像标签" prop="image_tag">
          <el-input
            v-model="startForm.image_tag"
            placeholder="请输入镜像标签"
          />
        </el-form-item>
        <el-form-item label="容器" prop="container_name">
          <el-input
            v-model="startForm.container_name"
            placeholder="请输入容器名称"
          />
        </el-form-item>
      </el-form>

      <template #footer>
        <div class="dialog-footer">
          <el-button type="primary" @click="submitStartForm">确 定</el-button>
          <el-button @click="cancelStart">取 消</el-button>
        </div>
      </template>
    </el-dialog>
  </div>
</template>

<script setup name="Deployment">
import { ref, reactive, getCurrentInstance, onMounted, toRefs } from "vue";
import { useRouter } from "vue-router";
import { useTitle } from "@/utils/dynamicTitle";
import { ElMessage, ElMessageBox } from "element-plus";
import { parseTime } from "@/utils/ruoyi";
import {
  listDeploymentServices,
  getDeploymentStatus,
  getDeploymentService,
  updateDeploymentService,
  delDeploymentService,
  delDeploymentServiceBatch,
  startDeploymentService,
  stopDeploymentService,
  getTrainingTaskList,
} from "@/api/deploy";

const router = useRouter();
const { proxy } = getCurrentInstance();

const serviceList = ref([]);
const open = ref(false);
const startDialogVisible = ref(false);
const total = ref(0);
const loading = ref(false);
const showSearch = ref(true);
const ids = ref([]);
const single = ref(true);
const multiple = ref(true);
const title = ref("");
const serviceForm = ref(null);
const startFormRef = ref(null);
const currentStartRow = ref(null);

// 状态选项
const statusOptions = ref([]);

const data = reactive({
  form: {
    service_id: "",
    service_name: "",
    service_code: "",
    report_code: "",
    task_id: "",
    service_host: "",
    service_api_method: "",
    service_api_path: "",
    description: "",
    env_selection: "",
    api_method: "",
    api_host: "",
    api_data_path: "",
    data_request_class: "",
    data_response_class: "",
  },
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    service_host: "",
    service_name: "",
    service_status: "",
  },
  rules: {
    service_name: [
      { required: true, message: "请输入服务名称", trigger: "blur" },
    ],
    service_code: [
      { required: true, message: "请输入服务编码", trigger: "blur" },
    ],
    report_code: [
      { required: true, message: "请输入报码模块", trigger: "blur" },
    ],
    task_id: [{ required: true, message: "请选择任务", trigger: "change" }],
    service_host: [
      { required: true, message: "请选择服务器", trigger: "change" },
    ],
    service_api_method: [
      { required: true, message: "请选择接口方法", trigger: "change" },
    ],
    service_api_path: [
      { required: true, message: "请输入接口路径", trigger: "blur" },
    ],
    env_selection: [
      { required: true, message: "请选择环境", trigger: "change" },
    ],
    api_host: [{ required: true, message: "请输入API Host", trigger: "blur" }],
    api_data_path: [
      { required: true, message: "请输入API路径", trigger: "blur" },
    ],
    data_request_class: [
      { required: true, message: "请输入请求类", trigger: "blur" },
    ],
    data_response_class: [
      { required: true, message: "请输入响应类", trigger: "blur" },
    ],
    description: [
      { required: true, message: "请输入服务描述", trigger: "blur" },
    ],
  },
});

const { queryParams, form, rules } = toRefs(data);

// 启动服务表单数据
const startForm = reactive({
  service_name: "",
  host: "0.0.0.0",
  port: 3000,
  target_port: 3000,
  image_tag: "",
  container_name: "",
});

// 启动服务表单校验规则
const startRules = {
  service_name: [
    { required: true, message: "请输入服务名称", trigger: "blur" },
  ],
  host: [{ required: true, message: "请输入主机地址", trigger: "blur" }],
  port: [{ required: true, message: "请输入端口", trigger: "blur" }],
  target_port: [{ required: true, message: "请输入目标端口", trigger: "blur" }],
};

const serverOptions = ref([{ value: "127.0.0.1", label: "127.0.0.1" }]);

const taskOptions = ref([]);

const apiMethodOptions = ref([
  { value: "GET", label: "GET" },
  { value: "POST", label: "POST" },
  { value: "PUT", label: "PUT" },
  { value: "DELETE", label: "DELETE" },
]);

/** 获取任务列表 */
async function getTaskOptions() {
  try {
    const response = await getTrainingTaskList();
    // BentoML 接口返回格式：{ tasks: [...], total: ... } 或直接是 tasks 数组
    const tasks = response.tasks || response.data || response || [];
    taskOptions.value = tasks.map((task) => ({
      value: task.task_id,
      label: task.task_name || task.model_name || task.task_id,
    }));
  } catch (error) {
    console.error("获取任务列表失败:", error);
    ElMessage.error("获取任务列表失败");
  }
}

/** 获取服务状态列表 */
async function getStatusOptions() {
  try {
    const response = await getDeploymentStatus();
    statusOptions.value = response.options || response || [];
  } catch (error) {
    console.error("获取服务状态失败:", error);
    statusOptions.value = ["运行中", "已停止", "暂停中", "正常"]; // 默认值
  }
}

/** 查询服务列表 */
async function getList() {
  loading.value = true;
  try {
    // 将查询条件传给 BentoML 的 /deploy/bentoml/packages
    const response = await listDeploymentServices({
      service_host: queryParams.value.service_host || "",
      service_name: queryParams.value.service_name || "",
      service_status: queryParams.value.service_status || "",
    });

    // BentoML 返回结构：
    // {
    //   "success": true,
    //   "bentos": [ { basic, status, model, environment, raw_labels } ],
    //   "count": 6
    // }
    const bentos = response.bentos || response.data || [];

    // 适配到当前表格期望的字段结构
    serviceList.value = bentos.map((item) => {
      const basic = item.basic || {};
      const status = item.status || {};
      const model = item.model || {};
      const rawLabels = item.raw_labels || {};

      return {
        // 服务ID：使用 Bento Tag
        service_id: basic.tag,
        // 服务名称：优先使用 raw_labels.service_name，其次 model.service_name，再次 basic.name
        service_name:
          rawLabels.service_name || model.service_name || basic.name || "",
        // 服务状态：使用 docker_status（如“未部署”、“运行中”等）
        service_status: status.docker_status || "",
        // 部署模型：使用模型名称或 Bento 名称
        model_name: model.model_name || basic.name || "",
        // 部署版本：使用模型版本或 Bento 版本
        model_version: model.model_version || basic.version || "",
        // 服务描述：优先 basic.description，其次 raw_labels.description
        description: basic.description || rawLabels.description || "",
        // 创建时间：Bento 创建时间
        create_time: basic.created_at || "",
        // 保留原始数据，后续编辑/详情可用
        _raw: item,
      };
    });

    // 记录总数（如果后端有 count 字段则优先使用）
    total.value = response.count || serviceList.value.length;
  } catch (error) {
    console.error("获取服务列表失败:", error);
    ElMessage.error("获取服务列表失败");
    serviceList.value = [];
    total.value = 0;
  } finally {
    loading.value = false;
  }
}

/** 搜索按钮操作 */
function handleQuery() {
  queryParams.value.pageNum = 1;
  getList();
}

/** 重置按钮操作 */
function resetQuery() {
  proxy.resetForm("queryRef");
  handleQuery();
}

/** 删除按钮操作 */
async function handleDelete(row) {
  const serviceIds = row.service_id || ids.value;
  try {
    await ElMessageBox.confirm(
      '是否确认删除服务编号为"' + serviceIds + '"的数据项?',
      "系统提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );

    await delDeploymentService(serviceIds);
    getList();
    ElMessage.success("删除成功");
  } catch (error) {
    if (error !== "cancel") {
      console.error("删除服务失败:", error);
      ElMessage.error("删除服务失败");
    }
  }
}

/** 批量删除按钮操作 */
async function handleBatchDelete() {
  if (ids.value.length === 0) {
    ElMessage.warning("请选择要删除的服务");
    return;
  }

  try {
    await ElMessageBox.confirm(
      "是否确认删除选中的" + ids.value.length + "条数据?",
      "系统提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );

    await delDeploymentServiceBatch(ids.value);
    getList();
    ElMessage.success("删除成功");
  } catch (error) {
    if (error !== "cancel") {
      console.error("批量删除服务失败:", error);
      ElMessage.error("批量删除服务失败");
    }
  }
}

/** 多选框选中数据 */
function handleSelectionChange(selection) {
  ids.value = selection.map((item) => item.service_id);
  single.value = selection.length != 1;
  multiple.value = !selection.length;
}

/** 重置新增的表单以及其他数据  */
function reset() {
  form.value = {
    service_id: "",
    service_name: "",
    service_code: "",
    report_code: "",
    task_id: "",
    service_host: "",
    service_api_method: "",
    service_api_path: "",
    description: "",
    env_selection: "",
    api_method: "",
    api_host: "",
    api_data_path: "",
    data_request_class: "",
    data_response_class: "",
  };
}

/** 添加服务 */
function handleAdd() {
  router.push("/model/deployment/create");
}

/** 修改服务 */
async function handleUpdate(row) {
  reset();
  open.value = true;
  title.value = "编辑服务";

  try {
    // 获取服务详情（BentoML 返回的 Bento 包详情结构）
    const response = await getDeploymentService(row.service_id);
    const serviceDetail = response.data || response || {};

    // 从 Bento 包详情中提取数据
    const basic = serviceDetail.basic || {};
    const model = serviceDetail.model || {};
    const rawLabels = serviceDetail.raw_labels || {};
    const serviceInfo = serviceDetail.service_info || {};
    const apiInfo = serviceDetail.api_info || {};

    // 填充基本任务配置
    Object.assign(form.value, {
      service_id: basic.tag || row.service_id,
      service_name:
        serviceInfo.service_name ||
        rawLabels.service_name ||
        model.service_name ||
        basic.name ||
        row.service_name,
      service_code: serviceInfo.service_code || "",
      report_code: serviceInfo.report_code || "",
      task_id: serviceInfo.task_id || model.training_task_id || "",
      service_host: serviceInfo.service_host || "",
      service_api_method: serviceInfo.api_method || "",
      service_api_path: serviceInfo.api_path || "",
      description:
        serviceInfo.description ||
        basic.description ||
        rawLabels.description ||
        row.description ||
        "",
    });

    // 填充数据配置（优先使用 api_info，如果没有则使用默认值）
    if (apiInfo.api_method || apiInfo.api_host || apiInfo.api_path) {
      form.value.env_selection = "production"; // 默认使用生产环境
      form.value.api_method = apiInfo.api_method || "";
      form.value.api_host = apiInfo.api_host || "";
      form.value.api_data_path = apiInfo.api_path || "";
      form.value.data_request_class = apiInfo.request_class || "";
      form.value.data_response_class = apiInfo.response_class || "";
    } else {
      // 如果没有 api_info，设置默认值
      form.value.env_selection = "production";
      form.value.api_method = "";
      form.value.api_host = "";
      form.value.api_data_path = "";
      form.value.data_request_class = "";
      form.value.data_response_class = "";
    }
  } catch (error) {
    console.error("获取服务详情失败:", error);
    ElMessage.error("获取服务详情失败");
  }
}

/** 提交按钮 */
async function submitForm() {
  try {
    await proxy.$refs["serviceForm"].validate();

    // 准备 ServiceForm 数据（对外 API 配置）
    const serviceInfo = {
      service_name: form.value.service_name,
      service_code: form.value.service_code,
      report_code: form.value.report_code,
      task_id: form.value.task_id,
      service_host: form.value.service_host || null,
      api_method: form.value.service_api_method,
      api_path: form.value.service_api_path,
      api_request_class: form.value.data_request_class || "",
      api_response_class: form.value.data_response_class || "",
      description: form.value.description,
    };

    // 准备 APISpecsDefined 数据（模型计算依赖的外部数据接口配置）
    const apiInfo = {
      api_method: form.value.api_method || null,
      api_host: form.value.api_host || null,
      api_path: form.value.api_data_path || null,
      api_headers: { "Content-Type": "application/json" },
      api_params: { dataset: "test_data" },
      request_class: form.value.data_request_class || null,
      response_class: form.value.data_response_class || null,
    };

    // 构建 BentoUpdateRequest
    const updateData = {
      service_info: serviceInfo,
      api_info: apiInfo,
      // 可选字段
      bento_name: null, // 默认使用 service_name
      model_tag: null, // 默认使用 service_info.task_id
      python_packages: null,
      requirements_text: null,
      docker_base_image: null,
      python_version: null,
      cuda_version: null,
      description: form.value.description || null,
      replace_existing: true, // 默认替换现有
    };

    await updateDeploymentService(form.value.service_id, updateData);
    ElMessage.success("修改成功");
    open.value = false;
    getList();
  } catch (error) {
    console.error("修改服务失败:", error);
    ElMessage.error("修改服务失败");
  }
}

/** 取消按钮 */
function cancel() {
  open.value = false;
  reset();
}

/** 启动服务 */
function handleStart(row) {
  currentStartRow.value = row;
  // 初始化表单数据
  startForm.service_name = row.service_name || "";
  startForm.host = "0.0.0.0";
  startForm.port = 3000;
  startForm.target_port = 3000;
  startForm.image_tag = "";
  startForm.container_name = "";
  startDialogVisible.value = true;
}

/** 提交启动服务表单 */
async function submitStartForm() {
  try {
    await startFormRef.value.validate();

    const requestData = {
      service_name: startForm.service_name || null,
      host: startForm.host,
      port: startForm.port,
      target_port: startForm.target_port,
      image_tag: startForm.image_tag || null,
      container_name: startForm.container_name || null,
    };

    await startDeploymentService(currentStartRow.value.service_id, requestData);
    startDialogVisible.value = false;
    getList();
    ElMessage.success("启动成功");
  } catch (error) {
    if (error !== false) {
      // false 表示表单验证失败，不需要显示错误
      console.error("启动服务失败:", error);
      ElMessage.error("启动服务失败");
    }
  }
}

/** 取消启动服务 */
function cancelStart() {
  startDialogVisible.value = false;
  currentStartRow.value = null;
}

/** 停止服务 */
async function handleStop(row) {
  try {
    await ElMessageBox.confirm(
      '是否确认停止服务"' + row.service_name + '"?',
      "系统提示",
      {
        confirmButtonText: "确定",
        cancelButtonText: "取消",
        type: "warning",
      }
    );

    await stopDeploymentService(row.service_id);
    getList();
    ElMessage.success("停止成功");
  } catch (error) {
    if (error !== "cancel") {
      console.error("停止服务失败:", error);
      ElMessage.error("停止服务失败");
    }
  }
}

// 初始化
onMounted(() => {
  getStatusOptions();
  getTaskOptions();
  getList();
});
</script>

<style scoped>
.middle {
  display: flex;
  justify-content: center;
  padding: 0 20px;
}
.line {
  width: 20px;
  height: 2px;
  background-color: #ccc;
  margin-top: 15px;
}

.form-section {
  margin-bottom: 30px;
  padding: 20px;
  border: 1px solid #ebeef5;
  border-radius: 4px;
}

.section-title {
  font-size: 16px;
  font-weight: 500;
  color: #303133;
  margin: 0 0 20px 0;
  padding-bottom: 10px;
  border-bottom: 1px solid #ebeef5;
}
</style>
